<template>
  
      <div>
        <div id="container"/>
      </div>

</template>

<script>
import AMap from 'AMap'
export default {
  name: 'hmap',
  components: {
    
  },
  data () {
    return {
      map:{},
      markers: [
          //自定义标点对象
          {
            position: [116.205467, 39.907761],
            name: '检测1',
            address: '地址1',
            type: '类型1',
          },
          {
            position: [116.368904, 39.913423],
            name: '检测2',
            address: '地址2',
            type: '类型2',
          },

          {
            position: [116.305467, 39.807761],
            name: '检测3',
            address: '地址3',
            type: '类型3',
          },

          {
            position: [116.265467, 39.807761],
            name: '检测4',
            address: '地址4',
            type: '类型4',
          },
        ],
      marker: {}, //地图标点对象
    }
  },
  methods: {
    initMap(){
      this.map = new AMap.Map('container', {
        mapStyle: 'amap://styles/whitesmoke',
        zoom: 11, //级别
        center: [116.39742, 39.9092], //中心点坐标
      })
    },
    getMarkers(){
      const mapp = this.map
     //自定义标点样式
      let icon = new AMap.Icon({
          size: new AMap.Size(40, 40), // 图标尺寸
          image: require('assets/img/shiwu1.svg'), // Icon的图像
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
        })
      for (let i = 0; i < this.markers.length; i++) {
          this.marker = new AMap.Marker({
            position: this.markers[i].position,
            map: this.map,
            icon: icon,
          })
          this.marker.content = this.markers[i].name
          this.marker.address = this.markers[i].address
          this.marker.type = this.markers[i].type
          this.marker.lng = this.markers[i].position[0] //经度
          this.marker.lat = this.markers[i].position[1] //纬度
          //标点点击事件
          this.marker.on('click', function (ev) {
            let info = []
            var position = new AMap.LngLat(ev.target.lng, ev.target.lat)
            info.push(
              `<div style="
                  background-color: rgba(165, 42, 42, 0.8);
                  border-radius: 1rem;
                  padding: 1rem 1rem;
                  color: #fff ;
                  border: #fff solid 2px
                  ">
                 <p>检测名称:${ev.target.content}</p>
                 <p>详细地点:${ev.target.address}</p>
                 <p>类型型:${ev.target.type}</p>
              </div>`
            )
            //创建窗体
              var infoo = document.createElement('div')
              infoo.className = 'custom-info'
              var middle = document.createElement('div')
              middle.className = 'info-middle'
              middle.innerHTML = info
              infoo.appendChild(middle)
              var line = document.createElement('div')
              line.className = 'info-line'
              infoo.appendChild(line)
              var yline = document.createElement('div')
              yline.className = 'info-yline'
              infoo.appendChild(yline)
            var infoWindow = new AMap.InfoWindow({
              // anchor: 'bottom-right',
              // offset: new AMap.Pixel(35, 20),
              isCustom: true,
              content: infoo,
            })

            infoWindow.open(mapp, position)
          })
          //点击标点以外地方窗体消失
          mapp.on('click', function () {
            mapp.clearInfoWindow()
          })
        }
    },
},
  mounted() {
   this.initMap()
   this.getMarkers()  
  }
}
</script>

<style scoped lang="scss">
#container {
    width: 100%;
    height: calc(100vh - 4rem);
    
  }
</style>
